﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MapV 蜂巢图</title>
    <script type="text/javascript" src="http://mapv.baidu.com/build/mapv.min.js"></script>
    <script type="text/javascript" src="http://iclient.supermapol.com/libs/iclient8c/libs/SuperMap.Include.js"></script>
    <script type="text/javascript" src='../../dist/iclient9-legacy.min.js'></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript">
    var map, baseLayer, mapvLayer,
        url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China_4326";

    init();
    function init() {
        if (!document.createElement('canvas').getContext) {
            alert('您的浏览器不支持 canvas，请升级');
            return;
        }

        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.Attribution(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
        });
        baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {transparent: true, cacheEnabled: true}, {maxResolution: "auto"});
        baseLayer.events.on({"layerInitialized": addLayer});
    }

    function addLayer() {
        map.addLayers([baseLayer]);
        map.setCenter(new SuperMap.LonLat(104, 34.7), 2);
        createMapVLayer();
    }

    //示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理
    function createMapVLayer() {
        var randomCount = 1000;

        var data = [];

        var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南",
            "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州",
            "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];

        // 构造数据
        while (randomCount--) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            fillStyle: 'rgba(55, 50, 250, 0.8)',
            shadowColor: 'rgba(255, 250, 50, 1)',
            shadowBlur: 20,
            max: 100,
            size: 50,
            label: {
                show: true,
                fillStyle: 'white',
            },
            globalAlpha: 0.5,
            gradient: {0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
            draw: 'honeycomb'
        };

        mapvLayer = new SuperMap.Layer.MapVLayer("mapv", {dataSet: dataSet, options: options});
        map.addLayer(mapvLayer);

        setTimeout(function () {
            openToolTip("示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理", map.getCenter());
        }, 1000);

    }

    function openToolTip(text, latLng) {
        var contentHTML = "<div style='width:216px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
        contentHTML += text;
        contentHTML += "</div>";
        framedCloud = new SuperMap.Popup.FramedCloud(
            "chicken",
            latLng,
            null,
            contentHTML,
            null,
            true,
            null,
            true
        );
        map.addPopup(framedCloud);
    }
</script>
</body>
</html>
